<template>
    <div class="pre_BannerArea">
        <mu-carousel hide-controls class="bannerArea">
            <mu-carousel-item>
                <img :src="carouselImg1">
            </mu-carousel-item>
            <mu-carousel-item>
                <img :src="carouselImg2">
            </mu-carousel-item>
            <mu-carousel-item>
                <img :src="carouselImg3">
            </mu-carousel-item>
            <mu-carousel-item>
                <img :src="carouselImg4">
            </mu-carousel-item>

        </mu-carousel>
    </div>
</template>

<script>
    import carouselImg1 from '@/assets/image/1.jpg';
    import carouselImg2 from '@/assets/image/2.png';
    import carouselImg3 from '@/assets/image/3.jpg';
    import carouselImg4 from '@/assets/image/5.png';
    export default {
        name: "bannerArea",
        data () {
            return {
                carouselImg1,
                carouselImg2,
                carouselImg3,
                carouselImg4,
            }
        }
    }
</script>

<style scoped>
    .pre_BannerArea{
        width:100%;
        height:180px;
        float:left;
        margin-top:96px;
    }
.bannerArea{
    width:100%;
    height:100%;
    float:left;
    overflow: hidden;
}
    .bannerArea img{
        width:auto;
        height:100%;
    }
</style>